<template>
	<div class="class-details">
		<div class="classIndex_h quality-link">
			<span>综合素质评价</span>
			<router-link  class="fade-router" v-if="$store.getters.userInfo.is_headmaster == 1" :to="{path: '/class/quality/manage', query: {id: path}}">评价管理</router-link>
		</div>

		<div class="quality-route">
			<!-- 班主任 -->
			<template v-if="$store.getters.userInfo.is_headmaster === 1">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/details', query: {id: path}}">班级详情</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/students', query: {id: path}}">评价学生</router-link>
			</template>
			
			<!-- 学生 -->
			<template v-else-if="roleBaseid(4)">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-portrait', query: {id: path}}">我的画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-details', query: {id: path}}">评价详情</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/self', query: {id: path}}">自我评价</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/classmate', query: {id: path}}">评价同学</router-link>
			</template>
			<!-- 家长 -->
			<template v-else-if="roleBaseid(5)">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-portrait', query: {id: path}}">孩子画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-details', query: {id: path}}">评价详情</router-link>
			</template>
			<!-- 任课老师 -->
			<template v-else-if="roleBaseid(6)">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/students', query: {id: path}}">评价学生</router-link>
			</template>
		</div>
		
		<p class="quality-tips">注：该学期评价截止时间为：{{endTime}}，截止时间内为评价则为弃权</p>

		<div class="quality-seleter">
			<span>学期：</span>
			<el-select v-model="semester" clearable placeholder="请选择" @change="changeQuality">
			   <el-option  
			     v-for="(item, index) in SemesterList"
			     :key="index"
			     :label="item.name"
			     :value="item.id">
			   </el-option>
			 </el-select>
		</div>

		<div class="quality-state">
			<span>状态：</span>
			<template>
			  <el-select v-model="value" clearable placeholder="请选择" @change="getSemester">
			    <el-option label="全部" value="-1"></el-option>
			    <el-option label="已完成" value="1"></el-option>
			    <el-option label="未完成" value="0"></el-option>
			  </el-select>
			</template>

			<el-input v-model="keyword" placeholder="输入学生名" clearable  @change="getSemester"  suffix-icon="el-icon-search"></el-input>

		</div>

		<template v-if="studentList.length != 0">
		  <el-table  v-loading="loading"
		element-loading-text="拼命加载中"
		    :data="studentList"
		    border
		    style="width: 100%">
		    <el-table-column
		      align="center"
		      prop="name"
		      label="学生">
		    </el-table-column>
		    <el-table-column
		    	 align="center"
		      label="评分进度">
		      	<template slot-scope="scope">
		      		<span>{{scope.row.have_ping_num }} / {{scope.row.all_ping_num}}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      prop="all_score"
		      align="center"
		      label="综合分数">
		    </el-table-column>
		    <el-table-column
		      label="操作"
		      align="center"
		      width="100">
		      <template slot-scope="scope">

		      	<router-link  class="fade-router" v-if="scope.row.me_ping == 1" :to="{path: '/class/quality/operation', query: {id: $route.query.id, uid: scope.row.id,name: scope.row.name,tid: semester,state: scope.row.me_ping}}">详情</router-link>
		      	<router-link  class="fade-router" v-else :to="{path: '/class/quality/operation', query: {id: $route.query.id, uid: scope.row.id,name: scope.row.name,tid: semester,state: scope.row.me_ping, relo: userid}}">评价</router-link>
		      </template>
		    </el-table-column>
		  </el-table>
		</template>

		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>

		<el-pagination class="quality-page"  v-if="sunTotal > 10"
		      @size-change="sizeChange"
		      @current-change="currentChange"
		      :current-page="page"
		      :page-sizes="[10, 50, 100, 200, 300, 400]"
		      :page-size="size"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="sunTotal">
		    </el-pagination>
	</div>
</template>

<script>
	
	export default {
		data(){
			return {
				loading: true,
				path: this.$route.query.id,
				semester: '',
				keyword: '',
				value: '-1',
				selectList: [],
				SemesterList: [],
				studentList: [],
				page: 1,
				size: 10,
				sunTotal: 0,
				endTime: 0,
				placeholder: false,
				userid: ''
			}
		},
		watch: {
			'$store.state.changData': {
				handler(val, newval){
					this.path = sessionStorage.getItem('classId')
					this.getSemester()
					
				},
				immediate: true
			}
		},
		created(){

			if (this.roleBaseid(4, 5)) {
				this.userid = 2
			}else if (this.roleBaseid(6)) {
				this.userid = 1
			}else{
				this.userid = 3
			}
			
		},
		methods: {
			/*评价截止时间*/
			getendTime(){
				let success = (res=>{
					if (res.data.length == 0) {return }

					this.endTime = `${res.data.substring(0,4)}年${res.data.substring(5,7)}月${res.data.substring(8,10)}日  ${res.data.substring(11,16)}`
				})

				let params = {
					term_id: this.semester,
					class_id: this.$route.query.id
				};

				this.$ajax.get('api/quality/get_end_time',{ params, func: {success: success}})
			},
			changeQuality(val){
				if (this.semester == '') {
					this.studentList = []
				}else{
					this.semester = val
					sessionStorage.setItem('termid', this.semester)
					this.getendTime()
					this.getClassDetail()
				}
			},
			//请求学期数据
			getSemester(){
				let success = (res=>{

					this.$nextTick(()=>{
						this.SemesterList = res.data;
						this.semester = res.data.length > 0 ? res.data[0].id : '';

						
						sessionStorage.setItem('termid', this.semester)
						for (var i = 0; i < this.SemesterList.length; i++) {
							if (this.SemesterList[i].semester == 1) {
								this.SemesterList[i].name = this.SemesterList[i].start_year +'-'+ this.SemesterList[i].end_year + '学年 第一学期'
							}else{
								this.SemesterList[i].name = this.SemesterList[i].start_year +'-'+ this.SemesterList[i].end_year + '学年 第二学期'
							}
							
						}
						this.getendTime()
						this.getClassDetail()
					})
				
				});

				let fail = (res=>{

				})

			

				let params = {
					now_term: 1
				};

				this.$ajax({
					url: 'api/quality/get_term',
					method: 'get',
					params: params,
					func: {success: success, fail: fail}
				})
			},
			// 获取班级素质评价列表
			getClassDetail(){

				let success = (res=>{
					this.$nextTick(()=>{
						this.studentList = res.data;
						this.loading = false
						this.studentList.length != 0 ? this.placeholder = false : this.placeholder = true 
					})
					
				});

				let fail = (res=>{
					// this.$message.error(res.msg)
					this.studentList = [];
					this.loading = false
					this.placeholder = true

				})
				let  params = {
					term_id: this.semester,/*学期id*/
					class_id: this.path,/*班级id*/
					keyword: this.keyword,
					is_over: this.value/*是否结束 -1全部 1完成 0未完成*/
				}

				this.$ajax.get('api/quality/get_class_detail',{params,func: {success: success,fail: fail}})
			},
			sizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			currentChange(val) {
				console.log(`当前页: ${val}`);
			}
		},
	}
</script>